<!doctype html>
<html class="echarts-dashboard">

<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles/report.css" rel="stylesheet">
</head>

<body class="echarts-dashboard">
    <div class="container-fluid echarts-dashboard">
        <div class="text-center">
            <h2 id="title" class="title">电机状态</h2>
        </div>
        <div class="text-right">
            <input id="language-change" class="btn btn-primary btn-sm btn-change" type="button" value="中文/English" />
        </div>

        <div class="row echarts-full m-auto">
            <div class="col-md-4 col-lg-4" id="echarts-engine-rotation-speed"></div>
            <div class="col-md-4 col-lg-4" id="echarts-engine-vibration"></div>
            <div class="col-md-4 col-lg-4" id="echarts-power-usage"></div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery.slim.min.js"></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="system/scripts/igrX.js"></script>
    <script type="text/javascript" src="scripts/trend.js"></script>
    <script type="text/javascript" src="scripts/echarts.js"></script>
    <script type="text/javascript">
        var dateAxis = getDateAxis();
        var powerUsageChart = echarts.init(document.getElementById("echarts-power-usage"));
        var engineRotationSpeedChart = echarts.init(document.getElementById("echarts-engine-rotation-speed"));
        var engineVibrationChart = echarts.init(document.getElementById("echarts-engine-vibration"));
        var displayLanguage = null;
        var app = {};
        optionEngineRotationSpeed = {
            title: {
                text: '电机转速',
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: dateAxis
            }],
            yAxis: [{
                type: 'value',
                name: '转速',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} RPM'
                },
            }],
            series: [{
                name: '主链电机转速',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [20, 32, 1, 34, 90, 30, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }, {
                name: '回转链电机转速',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [32, 1, 34, 90, 30, 20, 20]
            }]
        };
        optionPowerUsage = {
            title: {
                text: '电机电能',
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['主链电机电能', '回转链电机电能'],
                top: '2%',
                right: '2%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: dateAxis
            }],
            yAxis: [{
                type: 'value',
                name: '电能',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} kwh'
                },
            }],
            series: [{
                name: '主链电机电能',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [20, 32, 1, 34, 90, 30, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }, {
                name: '回转链电机电能',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [1, 34, 90, 30, 20, 20, 32]
            }]
        };
        optionEngineVibration = {
            title: {
                text: '电机振动',
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: dateAxis
            }],
            yAxis: [{
                type: 'value',
                name: '振动',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} Hz'
                },
            }],
            series: [{
                name: '主链电机振动',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [20, 32, 1, 34, 90, 30, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            },{
                name: '回转链电机振动',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [34, 90, 30, 20, 20, 32, 1]
            }]
        };
        if (!!optionEngineVibration && !!optionEngineRotationSpeed) {
            engineVibrationChart.setOption(optionEngineVibration, true);
            engineRotationSpeedChart.setOption(optionEngineRotationSpeed, true);
            powerUsageChart.setOption(optionPowerUsage, true);
            displayLanguage = 'chinese';
        }
        $(document).ready(function () {
            $("#language-change").click(function () {
                if (displayLanguage === 'chinese') {
                    $("#title").text("Main Chain Engine");
                    engineRotationSpeedChart.setOption({
                        title: {
                            text: 'Rotation Speed',
                            x: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: dateAxis
                        }],
                        yAxis: [{
                            type: 'value',
                            name: 'Rotation Speed',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} RPM'
                            },
                        }],
                        series: [{
                            name: 'Mainchain Engine Rotation Speed',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Min'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        },{
                            name: 'Backward Engine Rotation Speed',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20]
                        }]
                    });
                    engineVibrationChart.setOption({
                        title: {
                            text: 'Viberation',
                            x: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: dateAxis
                        }],
                        yAxis: [{
                            type: 'value',
                            name: 'Viberation',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} Hz'
                            },
                        }],
                        series: [{
                            name: 'Mainchain Engine Viberation',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Min'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }, {
                            name: 'Backward Engine Viberation',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20]
                        }]
                    });
                    powerUsageChart.setOption({
                        title: {
                            text: 'Engine Power Usage',
                            x: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['Power'],
                            top: '2%',
                            right: '2%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: dateAxis
                        }],
                        yAxis: [{
                            type: 'value',
                            name: 'Power',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} kwh'
                            },
                        }],
                        series: [{
                            name: 'Mainchain Engine Power',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Min'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }, {
                            name: 'Backward Engine Power',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20]
                        }]
                    });
                    displayLanguage = 'English';
                } else {
                    engineVibrationChart.setOption(optionEngineVibration, true);
                    engineRotationSpeedChart.setOption(optionEngineRotationSpeed, true);
                    powerUsageChart.setOption(optionPowerUsage, true);
                    displayLanguage = 'chinese';
                    $("#title").text("电机状态");
                }
            });
        });
    </script>

</body>

</html>